<template>
  <div style="padding: 20px;">
    <div class="wrapper" ref="wrapper">
      <div class="item" ref="item" v-for="(item,index) in list" :key="index">
        <template v-if="item.type == 1">
          <statistical :data="statisticalData"></statistical>
        </template>
        <template v-else-if="item.type == 2">
          <v-link :data="statisticalData"></v-link>
        </template>
        <template v-else>
          <div class="itemCss">{{ item.title }}</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import statistical from './components/statistical'
import vLink from './components/statistical/Link.vue'
export default {
  name: 'homeNew',
  components: {
    statistical,
    vLink,
  },
  data() {
    return {
      list: [
        { id: 1, title: '测试1', type: 1 },
        { id: 2, title: '测试2', type: 2 },
        { id: 3, title: '测试3', type: 2 },
        { id: 4, title: '测试4', type: 2 },
        { id: 5, title: '测试5', type: 2 },
        { id: 6, title: '测试6', type: 2 },
        { id: 7, title: '测试7', type: 2 },
        { id: 8, title: '测试8', type: 0 },
        { id: 9, title: '测试9', type: 0 },
      ],
      statisticalData: [
        { title: '概览', count: 163, progress: 80 },
        { title: '概览', count: 163, progress: 80 },
        { title: '概览', count: 163, progress: 80 },
        { title: '概览', count: 163, progress: 80 },
        { title: '概览', count: 163, progress: 80 },
        { title: '概览', count: 163, progress: 80 },
        { title: '概览', count: 163, progress: 80 },
        { title: '概览', count: 163, progress: 80 },
      ],
    }
  },
  mounted() {
    document.ondragstart = function () {
      return false
    }
    this.$refs.item.map((x, index) => {
      x.onmousedown = (e) => {
        this.$refs.wrapper.onmousemove = (ev) => {
          x.style.left = ev.x - e.x + 'px'
          x.style.top = ev.y - e.y + 'px'
          x.style.zIndex = 999
          this.showBorder(x.offsetLeft, x.offsetTop, index)
        }
        this.$refs.wrapper.onmouseup = (eup) => {
          this.$refs.wrapper.onmousemove = null
          x.style.zIndex = 0

          this.showBorder(x.offsetLeft, x.offsetTop, index, (callIndex, isLeft) => {
            this.moveData(index, callIndex, isLeft)
          })
          // 清除修改样式
          x.style.left = 0
          x.style.top = 0
          this.$refs.item.map((m) => (m.style.border = 'none'))
        }
      }
    })
  },
  methods: {
    // 展示改变位置处的border展示
    showBorder(offsetLeft, offsetTop, index, callback) {
      this.$refs.item
        .filter((v, i) => i != index)
        .map((x, z) => {
          let left = x.offsetLeft + x.clientWidth / 2
          let isLeft = left > offsetLeft && x.offsetLeft < offsetLeft

          let right = x.offsetLeft + x.clientWidth
          let isRight = right > offsetLeft && left < offsetLeft

          let top = x.offsetTop + x.clientHeight
          let isTop = x.offsetTop <= offsetTop && top > offsetTop
          if (isLeft && isTop) {
            x.style.borderLeft = '2px dashed #ff0000'
            if (callback) callback(z > index ? ++z : z, true)
          } else {
            x.style.borderLeft = 'none'
          }
          if (isRight && isTop) {
            x.style.borderRight = '2px dashed #ff0000'
            if (callback) callback(z >= index ? ++z : z, false)
          } else {
            x.style.borderRight = 'none'
          }
        })
    },
    // move 数据源
    moveData(fromINdex, toIndex, isLeft) {
      let from = fromINdex
      let to = toIndex
      let tmp = this.list[from]
      if (isLeft) {
        // 左侧
        if (to < from) from++
        if (to == 0) {
          this.list.unshift(tmp)
          to = 0
        } else {
          this.list.splice(to, 0, tmp)
        }
      } else {
        if (to < from) from++
        this.list.splice(to + 1, 0, tmp)
      }
      this.list.splice(from, 1)
    },
  },
}
// 每次移动 监听x 位置 与其当前行偏移量的x值
</script>

<style lang="scss" scoped>
.wrapper {
  display: grid;
  // grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: minmax(100px, auto);
  // border: 1px solid;
  position: relative;
}
.item {
  padding: 20px;
  // height: 100px;
  // background: #ccc;
  cursor: pointer;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  .itemCss {
    background: blue;
    border-radius: 4px;
    padding: 20px;
    color: #fff;
    cursor: inherit;
  }
}
// .item:nth-child(2) {
//   grid-column: 2 / 4;
// }
</style>